import React, { memo } from 'react'
import {HashRouter, Outlet, useLocation} from 'react-router-dom';
// import WrapRoute from '../../routes/index'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import './bottom.css'
import { actionCreators } from '../../pages/Main/store';
import HeadNumIcon from '../../common/headNumIcon/HeadNumIcon'

import main from '../../assets/images/首页.png'
import mainFocus from '../../assets/images/首页-选中.png'
import classify from '../../assets/images/分类.png'
import classifyFocus from '../../assets/images/分类-选中.png'
import location from '../../assets/images/定位.png'
import locationFocus from '../../assets/images/定位-选中.png'
import shopping from '../../assets/images/购物车.png'
import shoppingFocus from '../../assets/images/购物车-选中.png'
import my from '../../assets/images/我的.png'
import myFocus from '../../assets/images/我的-选中.png'

import WrapRoute from '../../routes/index'


const Bottom = (props) => {
  // const index = 0;
  let { routes, index,selectGoods } = props;
  const {pathname}  = useLocation()
  // 匹配不同路径，高亮对应图标
  const allPath = ['/home/main','/home/classify','/home/location','/home/shopping','/home/my']
  // console.log(pathname);
  index = allPath.findIndex((value) => pathname==value) 
  // console.log(index,'//////////');
  
  const { changeIndex } = props;

  const countAmount = () => {
    let subCount = 0
    selectGoods.map((item) => {
      subCount = subCount + item.count
    })
    // console.log(subCount,'=============');
    return subCount
  }

  return (
    <>
      {/* <HashRouter>
        <WrapRoute />
      </HashRouter> */}
      
      <div className="Bottom-warrper" >
        <div className="Bottom-warrper-warp" key="1" onClick={() => {changeIndex(0)}} >
          <Link to="/home/main" style={{ textDecoration: "none" }} >
              <div className="icon">
                <img alt="" src={index === 0 ? mainFocus : main} />
              </div>
              <div style={index === 0 ? { color: '#ff6600' } : {}} className="planet">首页</div>
          </Link>
        </div>

        <div className="Bottom-warrper-warp" key="2" onClick={() => { changeIndex(1) }}>
          <Link to='/home/classify' style={{ textDecoration: "none" }}>
            <div className="icon">
              <img alt="" src={index === 1 ? classifyFocus : classify} />
            </div>
            <div className="planet" style={index === 1 ? { color: "#ff6600" } : {}}>分类</div>
          </Link>
        </div>

        <div className="Bottom-warrper-warp" key="3" onClick={() => { changeIndex(2) }}>
          <Link to='/home/location' style={{ textDecoration: "none" }} >
            <div className="icon">
              <img alt="" src={index === 2 ? locationFocus : location} />
            </div>
            <div className="planet" style={index === 2 ? { color: "#ff6600" } : {}}>定位</div>
          </Link>
        </div>

        <div className="Bottom-warrper-warp" key="4" onClick={() => { changeIndex(3) }}>
          <Link to='/home/shopping' style={{ textDecoration: "none" }}>
            <div className="icon">
              <img  alt="" src={index === 3 ? shoppingFocus : shopping}/>
            </div>
            <div className="planet" style={index === 3 ? { color: "#ff6600" } : {}}>
              购物车
              <HeadNumIcon top="0vh" left="70vw" num={countAmount()}/>
            </div>
          </Link>
        </div>

        <div className="Bottom-warrper-warp" key="5" onClick={() => {changeIndex(4);}}>
          <Link to='/home/my' style={{ textDecoration: "none" }}>
            <div className="icon">
              <img alt="" src={index === 4 ? myFocus : my} />
            </div>
            <div className="planet" style={index === 4 ? { color: "#ff6600" } : {}}>我的</div>
          </Link>
        </div>
      </div>
      <Outlet />
    </>
  )
}


const mapStateToProps = (state) => {
    return {
        index: state.main.index,
        selectGoods: state.shopping.selectGoods
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        changeIndex(index) {
            dispatch(actionCreators.changeIndex(index))
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(memo(Bottom))
